<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>中原银行V端数据可视化</title>
		<style type="text/css">
			html {
				font-size: 15px;
			}
			.bubble-container {
				width: 1200px;
				height: 900px;
				border: 1px black solid;
			}
			.bubble-core {
				width: 1.5rem;
				height: 1.5rem;
				border-radius: 1rem;
				background-color: #007AFF;
				position: absolute;
				z-index: 2;
			}
			.bubble-part {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				top: 5.4rem;
				left: 6.33rem;
			}
			.bubble-circle1,.bubble-circle2 {
				animation: bubble_extend 1500ms;
				-moz-animation: bubble_extend 1500ms;
				-webkit-animation: bubble_extend 1500ms;
				animation-iteration-count: infinite;
				-moz-animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
				position: absolute;
			}
			.bubble-circle2 {
				animation-delay: 750ms;
			}
			.bubble-name {
				position: absolute;
				font-size: 1.2rem;
				font-weight: 700;
				width: 2.4rem;
				top: -2rem;
				z-index: 3;
			}
			@keyframes bubble_extend {
				from {
					width: 1.5rem;
					height: 1.5rem;
					border-radius: 1rem;
					border: 2px #007AFF solid;
					opacity: 1;
				}
				to {
					width: 3rem;
					height: 3rem;
					border-radius: 1.5rem;
					border: 1px #007AFF solid;
					opacity: 0;
				}
			}
			@-webkit-keyframes bubble_extend {
				from {
					width: 1.5rem;
					height: 1.5rem;
					border-radius: 1rem;
					border: 2px #007AFF solid;
					opacity: 1;
				}
				to {
					width: 3rem;
					height: 3rem;
					border-radius: 1.5rem;
					border: 1px #007AFF solid;
					opacity: 0;
				}
			}
			@-moz-keyframes bubble_extend {
				from {
					width: 1.5rem;
					height: 1.5rem;
					border-radius: 1rem;
					border: 2px #007AFF solid;
					opacity: 1;
				}
				to {
					width: 3rem;
					height: 3rem;
					border-radius: 1.5rem;
					border: 1px #007AFF solid;
					opacity: 0;
				}
			}
			
		</style>
	</head>
	<body>
		<div id="bubble_container" class="bubble-container">
			
			<div class="bubble-part">
				<div class="bubble-circle1"></div>
				<div class="bubble-circle2"></div>
				<div class="bubble-core"></div>
				<div class="bubble-name">郑州</div>
			</div>
			
		</div>
		
		<script type="text/javascript">
			var mapArr = [
				{"cityId":"001","top":"13.5","left":"4.6","name":"开封"},
				{"cityId":"002","top":"3.3","left":"11.6","name":"许昌"},
				{"cityId":"003","top":"8.5","left":"9.6","name":"周口"},
				{"cityId":"004","top":"6.5","left":"8.6","name":"洛阳"},
			]
			var bubbleContainer = document.getElementById("bubble_container");
			for(var index in mapArr){
				var bubbleObj = document.createElement("div");
				bubbleObj.setAttribute("class","bubble-part");
				bubbleObj.style = "top:"+mapArr[index]["top"]+"rem;left:"+mapArr[index]["left"]+"rem;";
				bubbleObj.innerHTML = '<div class="bubble-circle1"></div>'+
									'<div class="bubble-circle2"></div>'+
									'<div class="bubble-core"></div>'+
									'<div class="bubble-name">'+mapArr[index]["name"]+'</div>';
				bubbleContainer.appendChild(bubbleObj);
			}
			/* js原生批量绑定事件 */
			var bubbleCoreObj = document.getElementsByClassName("bubble-core");
			for(var index in bubbleCoreObj){
				bubbleCoreObj[index].onmouseover = function(){
					console.log(1);
				}
			}
			
			
		</script>
	</body>
</html>